<!doctype html>
<html class="echarts-dashboard">

<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles/report.css" rel="stylesheet">
</head>

<body class="echarts-dashboard">
    <div class="container-fluid echarts-dashboard">
        <div class="text-center">
            <h2 id="title" class="title">喷漆室</h2>
        </div>
        <div class="text-right">
            <input id="language-change" class="btn btn-primary btn-sm btn-change" type="button" value="中文/English" />
        </div>

        <div class="row echarts-row m-auto">
            <div class="col-md-8 col-lg-8 mx-auto" id="echarts-wind-pressure"></div>
        </div>
        <div class="row echarts-row m-auto">
            <div class="col-md-6 col-lg-6" id="echarts-paint-usage"></div>
            <div class="col-md-6 col-lg-6" id="echarts-environment"></div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery.slim.min.js"></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.min.js"></script>
    <!-- <script type="text/javascript" src="system/scripts/igrX.js"></script> -->
    <script type="text/javascript" src="scripts/trend.js"></script>
    <script type="text/javascript" src="scripts/echarts.js"></script>
    <script type="text/javascript">
        var dateAxis = getDateAxis();
        var windPressureChart = echarts.init(document.getElementById("echarts-wind-pressure"));
        var paintUsageChart = echarts.init(document.getElementById("echarts-paint-usage"));
        var environmentChart = echarts.init(document.getElementById("echarts-environment"));
        var displayLanguage = null;
        var app = {};
        optionWindPressure = {
            title: {
                text: '风压、负压显示',
                left: '2%',
                top: '2%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            legend: {
                data: ['自动喷漆风压', '手动喷漆风压'],
                right: '4%',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                data: dateAxis
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '自动喷漆风压',
                    type: 'bar',
                    stack: '自动喷漆',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data: [320, 302, 341, 374, 390, 450, 420]
                },
                {
                    name: '手动喷漆风压',
                    type: 'bar',
                    stack: '手动喷漆',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data: [302, 341, 374, 390, 450, 420, 320]
                }
            ]
        };
        optionPaintUsage = {
            title: {
                text: '油漆用量',
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['自动喷漆', '手动喷漆'],
                top: '2%',
                right: '2%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: dateAxis
            }],
            yAxis: [{
                type: 'value',
                name: '油漆用量',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} kwh'
                },
            }],
            series: [{
                name: '自动喷漆',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [20, 32, 1, 34, 90, 30, 20]
            }, {
                name: '手动喷漆',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [32, 1, 34, 90, 30, 20, 20]
            }]
        };
        optionEnvironment = {
            title: {
                text: '温湿度显示',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 10,
                right: 10,
                data: ['温度', '湿度'],
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateAxis
            },
            yAxis: [{
                type: 'value',
                name: '温度',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} °C'
                },
            }, {
                type: 'value',
                name: '湿度',
                min: 0,
                max: 80,
                axisLabel: {
                    formatter: '{value} %'
                },
            }],
            series: [{
                name: '温度',
                type: 'line',
                data: [21, 21, 25, 23, 22, 23, 20],
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }, {
                name: '湿度',
                type: 'line',
                yAxisIndex: 1,
                data: [10, 20, 20, 50, 30, 20, 10],
                markPoint: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        };
        if (!!optionEnvironment && !!optionWindPressure) {
            environmentChart.setOption(optionEnvironment, true);
            paintUsageChart.setOption(optionPaintUsage, true);
            windPressureChart.setOption(optionWindPressure, true);
            displayLanguage = 'chinese';
        }
        $(document).ready(function () {
            $("#language-change").click(function () {
                if (displayLanguage === 'chinese') {
                    $("#title").text("Printing Room");
                    environmentChart.setOption({
                        title: {
                            text: 'Temperature',
                        },
                        legend: {
                            data: ['Temp', 'Humid']
                        },
                        yAxis: [{
                            name: 'Temp',
                        }, {
                            name: 'Humid',
                        }],
                        xAxis: {
                            data: dateAxis
                        },
                        series: [{
                            name: 'Temp',
                            type: 'line',
                            data: [21, 21, 25, 23, 22, 23, 20],
                            markPoint: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            },
                            markLine: {
                                data: [{
                                    type: 'average',
                                    name: 'Avg'
                                }]
                            }
                        }, {
                            name: 'Humid',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [10, 20, 20, 50, 30, 20, 10],
                            markPoint: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            },
                            markLine: {
                                data: [{
                                    type: 'average',
                                    name: 'Avg'
                                }]
                            }
                        }]
                    });
                    paintUsageChart.setOption({
                        title: {
                            text: 'Paint Usage',
                            x: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['Auto Paint Usage', 'Manual Paint Usage'],
                            top: '2%',
                            right: '2%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: dateAxis
                        }],
                        yAxis: [{
                            type: 'value',
                            name: 'Paint Usage',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} kwh'
                            },
                        }],
                        series: [{
                            name: 'Auto Paint Usage',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [20, 32, 1, 34, 90, 30, 20]
                        }, {
                            name: 'Manual Paint Usage',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: [32, 1, 34, 90, 30, 20, 20]
                        }]
                    });
                    windPressureChart.setOption({
                        title: {
                            text: 'Wind Pressure',
                            left: '2%',
                            top: '2%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['Auto Paint', 'Manual Paint'],
                            top: '2%',
                            right: '2%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {
                                show: false
                            },
                            data: dateAxis
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                                name: 'Auto Paint',
                                type: 'bar',
                                stack: 'Auto Paint',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                data: [320, 302, 341, 374, 390, 450, 420]
                            },
                            {
                                name: 'Manual Paint',
                                type: 'bar',
                                stack: 'Manual Paint',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                data: [302, 341, 374, 390, 450, 420, 320]
                            }
                        ]
                    });
                    displayLanguage = 'English';
                } else {
                    environmentChart.setOption(optionEnvironment, true);
                    paintUsageChart.setOption(optionPaintUsage, true);
                    windPressureChart.setOption(optionWindPressure, true);
                    displayLanguage = 'chinese';
                    $("#title").text("喷漆室");
                }
            });
        });
    </script>

</body>

</html>